﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Demo</title>
	<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
	<link href="//unpkg.com/layui@2.9.21-rc/dist/css/layui.css"
		  rel="stylesheet" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
</head>
<body class="layui-padding-3">
	<script type="text/html" id="toolbarDemo">

		<label>工单编号</label>
		<div  class="layui-btn-container" style="text-align:right;">
			<label>工单编号:</label>
			<div class="layui-input-inline layui-input-wrap">
				<input type="text" id="processRouteNumber" autocomplete="off" lay-reqtext="请输入工单编号" lay-affix="clear" class="layui-input demo-phone">@* lay-verify="required" *@
			</div>
			<button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="search" id="searchBtn">
				<i class="layui-icon layui-icon-search"></i> 查询
			</button>
			<button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="searchBtn" lay-on="test-alert-btn">新建</button>
					<button type="button" lay-submit lay-filter="updateType1" class="layui-btn layui-bg-red" id="deleteBtn">
		  <i class="fa-solid fa-trash"></i> 删除
		</button>
		<button type="button" lay-submit  lay-filter="updateType2"  class="layui-btn layui-bg-warm" id="startBtn" style="background-color: orange; color: black;">
		  <i class="fa-solid fa-play"></i> 开始
		</button>
		<button type="button" lay-submit  lay-filter="updateType4"  class="layui-btn layui-bg-warm" id="cancelBtn" style="background-color: orange; color: black;">
		  <i class="fa-solid fa-ban"></i> 取消
		</button>
		<button type="button" lay-submit  lay-filter="updateType3"  class="layui-btn layui-bg-warm" id="endBtn" style="background-color: orange; color: black;">
		  <i class="fa-solid fa-stop"></i> 结束
		</button>
		<button type="button" lay-submit  lay-filter="updateType5"  class="layui-btn layui-bg-warm" id="withdrawBtn" style="background-color: orange; color: black;">
		  <i class="fa-solid fa-reply"></i> 撤回
		</button>
			<button type="button" class="layui-btn layui-btn-primary layui-border-green" id="searchBtn">导出</button>
		</div>
	</script>

	<table class="layui-hide" id="ID-table-demo-templet"></table>



 
	<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
	<script src="//unpkg.com/layui@2.9.21-rc/dist/layui.js"></script>
	@* 	<script src="/wwwroot/lib/layui/layui.js"></script> *@
	<script>

		layui.use(['table'], function () {
			var form = layui.form
			var laypage = layui.laypage;
			var $ = layui.$;
			var layer = layui.layer;
			var util = layui.util;
			var table = layui.table;
			$(function () {
				getList();
			})
			var Pindex = 1;
			var Psize = 5;

			//列表显示
			function getList() {
				$.ajax({
					url: '@ViewBag.Keep' + "/api/Department/workSheetList",
					dataType: "json",
					success: function (res) {
						console.log(res)
						table.render({
							elem: '#ID-table-demo-templet', // 表格元素的ID
							data: res.data, // 数据列表
							page: {
								count: res.count, // 数据总数
								curr: res.page, // 当前页码
								limit: res.limit, // 每页显示的条数
								limits: [5, 10, 15], // 每页条数的选择项
								layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
								groups: 5, // 显示5个连续页码
								jump: function (obj, first) {
									if (!first) {
										Pindex = obj.curr;
										Psize = obj.limit;
										getList();
									}
								}
							},
							toolbar: '#toolbarDemo',
							defaultToolbar: [
								'filter',
								'exports',
								'print',
								{
									// 右上角工具图标
									title: '提示',
									layEvent: 'LAYTABLE_TIPS',
									icon: 'layui-icon-tips',
									onClick: function (obj) {
										// 2.9.12+
										layer.alert('自定义工具栏图标按钮');
									},
								},
							],
							height: 'full-35', // 最大高度减去其他容器已占有的高度差
							cols: [
								[
									{ type: 'checkbox', fixed: 'left' },
									{ field: 'workSheetId', width: 80, title: 'ID', fixed: 'left' },
									{
										field: 'workSheetNumber', fixed: 'left', width: 180, title: '工单编号', templet: function (d) {
											// 直接设置字体颜色为蓝色
											return '<a href="" style="color:blue; target="_blank">' + d.workSheetNumber + '</a>';
										}, sort: true
									},
									{ field: 'productName', fixed: 'left', width: 100, title: '产品', },
									{ field: 'productNumber', fixed: 'left', width: 180, title: '产品编号', sort: true },
									{ field: 'productName', width: 100, title: '产品名称', sort: true },
									{ field: 'productStandard', width: 100, title: '产品规格', },
									{ field: 'productUnit', width: 80, title: '产品单位', },
									{
										field: 'productRelatedDocuments', width: 180, title: '关联单据', templet: function (d) {
											// 直接设置字体颜色为蓝色
											return '<a href="/Orders/OrderShowView" style="color:blue; target="_blank">' + d.productRelatedDocuments + '</a>';
										}
									},
									{ field: 'scheduledStartTime', width: 150, title: '计划开始时间', sort: true },
									{ field: 'scheduledEndTime', width: 150, title: '计划结束时间', sort: true },
									{ field: 'numberofpackages', width: 80, title: '计件数', sort: true },
									{ field: 'realQuantity', width: 80, title: '实际数', },
									{ field: 'goodScore', width: 80, title: '良品数', },
									{ field: 'defectiveQuantity', width: 80, title: '不良品数', },
									{ field: 'actualTime', width: 80, title: '报工时长', sort: true },
									{ field: 'taskIds', width: 80, title: '生产进度 ', },
									{ field: 'actualStartTime', width: 150, title: '开启时间', },
									{ field: 'actualEndTime', width: 150, title: '结束时间', },
									{ field: 'remark', width: 80, title: '备注', },
									{ field: 'createDate', width: 150, title: '创建时间', },
									{ field: 'createName', width: 80, title: '创建人', },
									{ field: 'updateName', width: 80, title: '修改人', },
									{ field: 'updateDate', width: 150, title: '修改时间', },
								]
							]
						});
					}
				})
			}
			//弹框
			layui.use(function () {
				var layer = layui.layer;
				var util = layui.util;
				// 事件
				util.on('lay-on', {
					'test-alert-btn': function () {
						layer.open({
							type: 2,
							area: ['1500px', '800px'],
							shadeClose: true,
							title: '工单(新建)',
							content: '/Worksheets/WorksheetAdd',
							end: function () { // 弹出层关闭后执行的回调
								localStorage.removeItem("WorksheetsData");
							},
						});
					}
				});
			});

			//修改状态
			function updateTypes(typess) {

				console.log(typess)
				// 获取选中行的数据
				var checkStatus = table.checkStatus('ID-table-demo-templet'); // 'test' 是你表格的 lay-filter 值
				var checkedData = checkStatus.data; // 获取选中行的数据数组

				// 从选中行数据中提取 workSheetId
				var workSheetIdss = checkedData.map(function (item) {
					return item.workSheetId;
				});
				console.log(workSheetIdss)
				var data = {
					workSheetIds: workSheetIdss,
                    types: typess
				}
				console.log(JSON.stringify(data))
				$.ajax({
					url: '@ViewBag.Keep' + "/api/Department/workSheetType",
					data: JSON.stringify(data),
					dataType: "json",
					type: "POST",
					contentType: "application/json",
					success: function (res) {
						console.log(res)
						if (res.code == 0) {
							layer.msg(res.messege);
						}
						else {
							//错误提示
							layer.msg(res.messege);
						}
					}
				});

			
			}



			// 监听提交删除
			form.on('submit(updateType1)', function (data) {
				//判断是否选中数组
				if ($('input[name="layTableCheckbox"]:checked').length == 0) {
					layer.msg('请选择要操作的数据');
					return;
				}
				updateTypes(1)
				// 在这里可以添加AJAX请求，将数据发送到服务器
				return false; // 阻止表单跳转
			});
			// 监听提交开始
			form.on('submit(updateType2)', function (data) {
				//判断是否选中数组
				if ($('input[name="layTableCheckbox"]:checked').length == 0) {
					layer.msg('请选择要操作的数据');
					return;
				}
				updateTypes(2)
				// 在这里可以添加AJAX请求，将数据发送到服务器
				return false; // 阻止表单跳转
			});
			// 监听提交结束
			form.on('submit(updateType3)', function (data) {
				//判断是否选中数组
				if ($('input[name="layTableCheckbox"]:checked').length == 0) {
					layer.msg('请选择要操作的数据');
					return;
				}
				updateTypes(3)
				// 在这里可以添加AJAX请求，将数据发送到服务器
				return false; // 阻止表单跳转
			});
			// 监听提交取消
			form.on('submit(updateType4)', function (data) {
				//判断是否选中数组
				if ($('input[name="layTableCheckbox"]:checked').length == 0) {
					layer.msg('请选择要操作的数据');
					return;
				}
				updateTypes(4)
				// 在这里可以添加AJAX请求，将数据发送到服务器
				return false; // 阻止表单跳转
			});
			// 监听提交撤回
			form.on('submit(updateType5)', function (data) {
				//判断是否选中数组
				if ($('input[name="layTableCheckbox"]:checked').length == 0) {
					layer.msg('请选择要操作的数据');
					return;
				}
				updateTypes(5)
				// 在这里可以添加AJAX请求，将数据发送到服务器
				return false; // 阻止表单跳转
			});
		});


		


 
	</script>
</body>
</html>



@* // layui.use(['table'], function () {
		// 	var table = layui.table;
		// 	var form = layui.form;

		// 	// 创建渲染实例
		// 	table.render({
		// 		elem: '#ID-table-demo-templet',
		// 		url: 'https://unpkg.com/outeres@0.1.3/json/2/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
		// 		page: true,
		// 		height: '315px',
		// 		toolbar: '#toolbarDemo',
		// 		defaultToolbar: [
		// 			'filter',
		// 			'exports',
		// 			'print',
		// 			{
		// 				// 右上角工具图标
		// 				title: '提示',
		// 				layEvent: 'LAYTABLE_TIPS',
		// 				icon: 'layui-icon-tips',
		// 				onClick: function (obj) {
		// 					// 2.9.12+
		// 					layer.alert('自定义工具栏图标按钮');
		// 				},
		// 			},
		// 		],
		// 		height: 'full-35', // 最大高度减去其他容器已占有的高度差
		// 		cols: [
		// 			[
		// 				{ type: 'checkbox', fixed: 'left' },
		// 				// 未自定义模板的普通列
		// 				{
		// 					field: 'id',
		// 					fixed: 'left',
		// 					width: 80,
		// 					title: 'ID',
		// 					sort: true,
		// 				},
		// 				// 模板 - 选择器写法
		// 				{
		// 					field: 'username',
		// 					width: 80,
		// 					title: '用户',
		// 					templet: '#ID-table-demo-templet-user',
		// 					fixed: 'left',
		// 					sort: true,
		// 				},
		// 				 模板 - 函数写法
		// 				{
		// 					field: 'sex',
		// 					width: 60,
		// 					title: '性别',
		// 					templet: function (d) {
		// 						if (d.sex === '男') {
		// 							return '<span style="color: blue">♂</span>';
		// 						} else {
		// 							return '<span style="color: pink">♀</span>';
		// 						}
		// 					},
		// 				},
		// 				// 模板 - 普通字符写法
		// 				{
		// 					field: 'city',
		// 					width: 115,
		// 					title: '城市',
		// 					templet:
		// 						'<div><i class="layui-icon layui-icon-location"></i> {{= d.city }}</div>',
		// 				},
		// 				// 模板中可包含任意字段、任意内容（如表单等）
		// 				{
		// 					title: '状态',
		// 					width: 85,
		// 					templet: '#ID-table-demo-templet-switch',
		// 				},
		// 				{
		// 					title: '其他',
		// 					minWidth: 200,
		// 					templet: '#ID-table-demo-templet-other',
		// 				},
		// 			],
		// 		],
		// 	});

		// 	// 状态 - 开关操作
		// 	form.on('switch(demo-templet-status)', function (obj) {
		// 		var id = this.value;
		// 		var name = this.name;
		// 		layer.tips(id + ' ' + name + ': ' + obj.elem.checked, obj.othis);
		// 	});
		// });*@